<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
    <!-- 官网提供的 axios 在线地址 -->
    <script src="axios.js"></script>
    <script src="util.js"></script>
</head>
<body>
<div id="app">
    <button type="button" @click="tzadd()">添加</button>

    姓名：<input type="text" name="name" v-model="tj.name" >
    年龄：<input type="text" name="name" v-model="tj.age" >
    <button type="button" @click="pageAll(1)">查询</button>
<table border="1">
    <tr>
        <td>ID</td>
        <td>姓名</td>
        <td>年龄</td>
        <td>性别</td>
        <td>手机号</td>
        <td>状态</td>
        <td>地址</td>
        <td>操作</td>
    </tr>
    <tr v-for="a in pojo.records">
        <td>{{a.id}}</td>
        <td>{{a.name}}</td>
        <td>{{a.age}}</td>
        <td>{{a.sex}}</td>
        <td>{{a.sjh}}</td>
        <td>{{a.dz}}</td>
        <td>{{a.zt}}</td>
        <td>
            <button type="button" @click="del(a.id)">删除</button>
            <button type="button" @click="hx(a.id)">修改</button>
        </td>
    </tr>
</table>
    <button type="button" @click="pageAll(1)">首页</button>
    <button type="button" @click="pageAll(pojo.current-1)">上页</button>
    <button type="button" @click="pageAll(pojo.current+1)">下页</button>
    <button type="button" @click="pageAll(pojo.pages)">尾页</button>共{{pojo.total}}条数据
</div>


<script>
    new Vue({
        el:"#app",
        data:{
            pojo:{},
            tj:{

            },
            name:""

        },
        created() {
            this.pageAll(1)
        },
        methods: {
            pageAll(pageNum){
                axios.post("/user/findAll?pageNum="+pageNum,this.tj).then(
                    res=>{
                        this.pojo=res.data
                    }
                )
            },
            del(id){
                axios.get("/user/del?id="+id).then(
                    res=>{
                        alert(("删除成功"))
                       location.href="ulist.html"
                    }
                )
            },
            hx(id){
                location.href="update.html?id="+id

            },
            tzadd(){
                location.href="add.html"
            }
        }
    })
</script>
</body>
</html>